<template>
  <div class="group-page">
    <header class="header">
      <!-- S 导航 -->
      <nav class="navbar navbar-default navbar-white navbar-fixed-top" role="navigation">
        <div class="container">
          <div class="navbar-header">
            <a href="/ask/">
              <h3 style="text-align: center">问答首页</h3>
            </a>
          </div>

          <div class="collapse navbar-collapse" id="navbar-collapse">
            <ul class="nav navbar-nav">
              <li class=""><a href="/ask/">首页</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
              <li>
                <form
                  class="form-inline navbar-form search-form pt-1"
                  action="/ask/search.html"
                  method="get"
                >
                  <input
                    class="form-control"
                    name="q"
                    value=""
                    type="text"
                    id="searchinput"
                    placeholder="搜索问题、话题或文章"
                    autocomplete="off"
                  />
                </form>
              </li>
              <li class="hidden-xs">
                <div class="py-3 px-2">
                  <a href="/addons/ask/question/post.html" class="btn btn-primary"
                    >提问</a
                  >
                </div>
              </li>
              <li class="dropdown belling">
                <a
                  href="/u/20278/notification?act=marktopall"
                  class="dropdown-toggle unread"
                  ><i class="fa fa-bell-o fa-lg"></i
                ></a>
                <ul class="dropdown-menu">
                  <li>
                    <a href="/u/20278/question?type=unsolved"
                      >你有 <b>10</b> 个提问待采纳</a
                    >
                  </li>
                </ul>
              </li>
            </ul>
          </div>
        </div>
      </nav>
      <!-- E 导航 -->
    </header>

    <div class="article-header" itemscope="" itemtype="http://schema.org/Question">
      <meta itemprop="name" content="fdaffddddddssdffsdfdsdf" />
      <meta itemprop="url" content="https://ask.xyedu.net/ask/question/324.html" />
      <meta itemprop="keywords" content="" />
      <meta itemprop="answerCount" content="0" />
      <meta itemprop="commentCount" content="0" />
      <meta itemprop="dateCreated" content="2023-12-01T13:10:58+08:00" />
      <meta itemprop="dateModified" content="2023-12-01T13:10:58+08:00" />
      <div class="container">
        <div class="row">
          <div class="col-xs-12 col-md-8">
            <!-- S 问题标签 -->
            <!---->
            <!-- E 问题标签 -->
            <div class="col-xs-4">年级：{{ list.grade }}</div>
            <div class="col-xs-4">科目：{{ list.subject }}</div>
            <label class="col-xs-4">赏金：￥30</label>
            <!-- S 问题标题 -->
            <h1 class="question-title">
              <span style="font-weight: normal; text-decoration: none; color: #inherit">{{
                list.title
              }}</span>
            </h1>
            <div class="question-richtext wysiwyg" itemprop="text">
              <p>{{ list.content }}</p>
              <p class="read-more">
                <a href="javascript:;" title="点击查看全文"
                  ><span class="text-primary"
                    ><i class="fa fa-angle-down"></i> 查看更多</span
                  ></a
                >
              </p>
            </div>
            <!-- E 问题内容 -->
          </div>
          <div class="col-xs-12 col-md-4 text-center">
            <div class="question-date text-muted my-2">
              <strong>15507348666</strong> 发布于 2023-12-01 13:10:58
            </div>
          </div>
        </div>

        <div class="comment-footer">
          <!-- S 问题操作 -->
          <div class="comment-toolbar"></div>
          <div class="row">
            <div class="col-xs-12 col-md-8 sub-comments hidden"></div>
          </div>
        </div>
      </div>
    </div>

    <div class="container">
      <div
        class="row"
        style="margin-top: 20px; margin-bottom: 20px; padding-bottom: 40px"
      >
        <div class="col-md-8 col-sm-12 p-0">
          <div class="article-section answer-list">
            <div class="answer-nav row">
              <div class="col-xs-10">
                <div class="title"><span class="answer-nums">0</span> 个回答</div>
              </div>
              <div class="col-xs-2">
                <select name="order" class="form-control pull-right">
                  <option value="default">默认排序</option>
                  <option value="date">按发布时间排序</option>
                </select>
              </div>
            </div>

            <div class="my-2 answer-nodata">暂无答案，快来添加答案吧</div>
          </div>
          <div class="article-section">
            <div id="post-comment">
              <h3 class="mt-1 mb-2">撰写答案</h3>
              <form action="/addons/ask/answer/post.html" method="post" id="postanswer">
                <input
                  type="hidden"
                  name="__token__"
                  value="c707c8157706800dcfa6fd5d4aecea35"
                />
                <input type="hidden" name="type" value="question" />
                <input type="hidden" name="id" value="324" />
                <div class="form-group">
                  <QuillEditor :value.sync="value" />
                </div>
                <div
                  id="peepsetting"
                  class="alert mt-1 hidden"
                  role="alert"
                  style="background: rgba(0, 132, 255, 0.1); color: #444"
                >
                  <h4 class="mt-1">
                    付费查看:
                    <select
                      name="switchpeeptype"
                      class="form-control form-selecttype"
                      style="display: inline-block; width: 75px"
                    >
                      <option value="price">设定金额</option>
                      <option value="score">设定积分</option>
                    </select>
                  </h4>
                  <div class="mb-2 mt-1" data-type="price">
                    <div class="input-group">
                      <span class="input-group-addon">￥</span>
                      <input
                        type="number"
                        step="0.01"
                        name="price"
                        class="form-control"
                        placeholder="请输入付费查看的金额，金额区间：0.1-10"
                      />
                      <span class="input-group-btn">
                        <a class="btn btn-primary btn-clear" href="javascript:">清除</a>
                      </span>
                    </div>
                  </div>
                  <div class="mb-2 mt-1 hidden" data-type="score">
                    <div class="input-group">
                      <span class="input-group-addon">积分</span>
                      <input
                        type="number"
                        step="1"
                        name="score"
                        class="form-control"
                        placeholder="请输入付费查看的积分，积分区间：10-100"
                      />
                      <span class="input-group-btn">
                        <a class="btn btn-primary btn-clear" href="javascript:">清除</a>
                      </span>
                    </div>
                  </div>
                  <div class="row mb-2" data-type="price">
                    <div class="col-xs-3">
                      <button
                        type="button"
                        class="btn btn-light btn-block btn-price"
                        data-value="1"
                      >
                        ￥1
                      </button>
                    </div>
                    <div class="col-xs-3">
                      <button
                        type="button"
                        class="btn btn-light btn-block btn-price"
                        data-value="2"
                      >
                        ￥2
                      </button>
                    </div>
                    <div class="col-xs-3">
                      <button
                        type="button"
                        class="btn btn-light btn-block btn-price"
                        data-value="5"
                      >
                        ￥5
                      </button>
                    </div>
                    <div class="col-xs-3">
                      <button
                        type="button"
                        class="btn btn-light btn-block btn-price"
                        data-value="10"
                      >
                        ￥10
                      </button>
                    </div>
                  </div>
                  <div class="row mb-2 hidden" data-type="score">
                    <div class="col-xs-3">
                      <button
                        type="button"
                        class="btn btn-light btn-block btn-price"
                        data-value="10"
                      >
                        10积分
                      </button>
                    </div>
                    <div class="col-xs-3">
                      <button
                        type="button"
                        class="btn btn-light btn-block btn-price"
                        data-value="20"
                      >
                        20积分
                      </button>
                    </div>
                    <div class="col-xs-3">
                      <button
                        type="button"
                        class="btn btn-light btn-block btn-price"
                        data-value="50"
                      >
                        50积分
                      </button>
                    </div>
                    <div class="col-xs-3">
                      <button
                        type="button"
                        class="btn btn-light btn-block btn-price"
                        data-value="100"
                      >
                        100积分
                      </button>
                    </div>
                  </div>
                  <div class="peephelp">
                    1. 如果设定了付费查看，则此回答只有提问者、回答者和管理员可以查看<br />
                    2.
                    如果提问者采纳了此回答，则付费查看生效(会员需要支付你设定的费用才能查看)，如果采纳了其它答案，付费查看失效(此时全体可见)<br />
                    3. 如果提问者在 7
                    天后仍未采纳最佳答案，则所有付费查看失效(此时全体可见)
                  </div>
                </div>
                <div class="row">
                  <div class="col-xs-12">
                    <div class="form-group">
                      <label class="col-xs-3 btn btn-primary" for="uploadimg"
                        ><span id="curobj_uploadimg">上传图片</span>
                        <input
                          type="file"
                          id="uploadimg"
                          name="uploadimg"
                          style="display: none"
                        />
                        <input type="hidden" name="imgs" />
                      </label>
                      <label
                        class="col-xs-3 btn btn-primary"
                        for="uploada"
                        style="margin: 0 0 0 18px"
                        ><span id="curobj_uploada">上传音频</span>
                        <input
                          type="file"
                          id="uploada"
                          name="uploada"
                          accept="audio/*"
                          capture="microphone"
                          style="display: none"
                        />
                        <input type="hidden" name="av" />
                      </label>
                      <label class="col-xs-5 text-center">
                        <input
                          name="submit"
                          type="submit"
                          id="submit"
                          value="提交答案(Ctrl+回车)"
                          class="btn btn-primary"
                        />
                      </label>
                    </div>
                  </div>
                  <div class="col-xs-4 text-right">
                    <div class="checkbox my-1 hidden">
                      <label>
                        <input
                          name="subscribe"
                          type="checkbox"
                          class="checkbox"
                          tabindex="7"
                          checked=""
                          value="1"
                        />
                        有人回复时邮件通知我
                      </label>
                    </div>
                  </div>
                </div>
              </form>
            </div>
          </div>
          <!-- E 撰写答案 -->
        </div>
        <div class="col-md-4 col-sm-12 hidden-xs">
          <div class="article-sidebar">
            <!-- S 关于作者 -->
            <div
              class="panel panel-default about-author"
              data-id="13129"
              itemprop="author"
              itemscope=""
              itemtype="http://schema.org/Person"
            >
              <meta itemprop="name" content="15507348666" />
              <meta
                itemprop="image"
                content=""
              />
              <meta itemprop="url" content="/u/13129" />
              <div class="panel-heading">
                <h3 class="panel-title">关于作者</h3>
              </div>
              <div class="panel-body">
                <div class="media">
                  <div class="media-left">
                    <a
                      href="/u/13129"
                      data-toggle="popover"
                      data-title="15507348666"
                      data-placement="left"
                      data-type="user"
                      data-id="13129"
                    >
                      <img
                        class="media-object img-circle img-medium"
                        src=""
                        data-holder-rendered="true"
                      />
                    </a>
                  </div>
                  <div class="media-body">
                    <h3 style="margin-top: 10px" class="media-heading">
                      <a href="/u/13129">15507348666</a>
                    </h3>
                    这家伙很懒，什么也没写！
                  </div>
                </div>
                <div class="row statistics">
                  <div class="col-xs-4">
                    <div class="statistics-text">提问</div>
                    <div class="statistics-nums"><a href="/u/13129/question">3</a></div>
                  </div>
                  <div class="col-xs-4">
                    <div class="statistics-text">回答</div>
                    <div class="statistics-nums"><a href="/u/13129/answer">0</a></div>
                  </div>
                  <div class="col-xs-4">
                    <div class="statistics-text">被采纳</div>
                    <div class="statistics-nums">0</div>
                  </div>
                </div>
                <div>
                  <div class="col-xs-6">
                    <a
                      href="javascript:;"
                      class="btn btn-primary btn-block btn-attention"
                      data-id="13129"
                      data-type="user"
                      ><i class="fa fa-plus"></i> <span>关注TA</span></a
                    >
                  </div>
                  <div class="col-xs-6">
                    <a
                      href="javascript:;"
                      class="btn btn-outline-primary btn-block btn-message"
                      data-id="13129"
                      ><i class="fa fa-comments-o"></i> 发私信</a
                    >
                  </div>
                </div>
              </div>
            </div>
            <!-- E 关于作者 -->

            <!-- S 相关问题 -->
            <div class="panel panel-default hot-article">
              <div class="panel-heading">
                <h3 class="panel-title">相关问题</h3>
              </div>
              <div class="panel-body"></div>
            </div>
            <!-- E 相关问题 -->

            <!-- S 热门文章 -->
            <div class="panel panel-default recommend-article">
              <div class="panel-heading">
                <h3 class="panel-title">热门文章</h3>
              </div>
              <div class="panel-body"></div>
            </div>
            <!-- E 热门文章 -->

            <!-- S 热门问题 -->
            <div class="panel panel-default hot-article">
              <div class="panel-heading">
                <h3 class="panel-title">热门问题</h3>
              </div>
              <div class="panel-body">
                <div class="media media-number">
                  <div class="media-left">
                    <span class="num">1</span>
                  </div>
                  <div class="media-body">
                    <a
                      class="link-dark"
                      href="/ask/question/3.html"
                      title="已传输：3.6 KB 用时 0.37 秒 (9.78 KB/s)."
                      >已传输：3.6 KB 用时 0.37 秒 (9.78 KB/s).</a
                    >
                  </div>
                </div>
                <div class="media media-number">
                  <div class="media-left">
                    <span class="num">2</span>
                  </div>
                  <div class="media-body">
                    <a
                      class="link-dark"
                      href="/ask/question/1.html"
                      title="牛吃草作文牛吃草作文牛吃草作文牛吃草作文"
                      >牛吃草作文牛吃草作文牛吃草作文牛吃草作文</a
                    >
                  </div>
                </div>
                <div class="media media-number">
                  <div class="media-left">
                    <span class="num">3</span>
                  </div>
                  <div class="media-body">
                    <a
                      class="link-dark"
                      href="/ask/question/2.html"
                      title="公园路口了，感觉有点不舒服了啊哈哈"
                      >公园路口了，感觉有点不舒服了啊哈哈</a
                    >
                  </div>
                </div>
                <div class="media media-number">
                  <div class="media-left">
                    <span class="num">4</span>
                  </div>
                  <div class="media-body">
                    <a
                      class="link-dark"
                      href="/ask/question/4.html"
                      title="一只鸭子多少钱，一个样。请吃饭怎么处理？"
                      >一只鸭子多少钱，一个样。请吃饭怎么处理？</a
                    >
                  </div>
                </div>
                <div class="media media-number">
                  <div class="media-left">
                    <span class="num">5</span>
                  </div>
                  <div class="media-body">
                    <a
                      class="link-dark"
                      href="/ask/question/6.html"
                      title="测试账号加上测试账号加上"
                      >测试账号加上测试账号加上</a
                    >
                  </div>
                </div>
                <div class="media media-number">
                  <div class="media-left">
                    <span class="num">6</span>
                  </div>
                  <div class="media-body">
                    <a
                      class="link-dark"
                      href="/ask/question/5.html"
                      title="cfdasfsdafdsafsdafsd"
                      >cfdasfsdafdsafsdafsd</a
                    >
                  </div>
                </div>
              </div>
            </div>
            <!-- E 热门问题 -->

            <!-- S 热门标签 -->
            <div class="panel panel-default hot-tags">
              <div class="panel-heading">
                <h3 class="panel-title">热门标签</h3>
              </div>
              <div class="panel-body">
                <a href="/ask/tag/1.html" class="tag"> 11111</a>
                <a href="/ask/tag/2.html" class="tag"> 555</a>
                <a href="/ask/tag/3.html" class="tag"> yt</a>
                <a href="/ask/tag/4.html" class="tag"> uy</a>
              </div>
            </div>
            <!-- E 热门标签 -->

            <!-- S 等待解答 -->
            <div class="panel panel-default recommend-article">
              <div class="panel-heading">
                <h3 class="panel-title">等待解答</h3>
              </div>
              <div class="panel-body">
                <div class="media media-number">
                  <div class="media-left">
                    <span class="tag">问</span>
                  </div>
                  <div class="media-body">
                    <a
                      class="link-dark"
                      href="/ask/question/5.html"
                      title="cfdasfsdafdsafsdafsd"
                      >cfdasfsdafdsafsdafsd</a
                    >
                  </div>
                </div>
              </div>
            </div>
            <!-- E 等待解答 -->

            <!-- S 推荐专家 -->
            <div class="panel panel-default panel-users">
              <div class="panel-heading">
                <h3 class="panel-title">推荐专家</h3>
              </div>
              <div class="panel-body">
                <div class="media media-number">
                  <div class="media-left">
                    <a class="link-dark" href="/u/19809" title="15074703968"
                      ><img
                        class="media-object img-circle img-small"
                        alt="15074703968"
                        src=""
                    /></a>
                  </div>
                  <div class="media-body">
                    <div class="media-heading">
                      <a class="link-dark" href="/u/19809" title="15074703968"
                        >15074703968</a
                      >
                    </div>
                    <div class="text-muted">0个答案 0次被采纳</div>
                  </div>
                </div>
              </div>
            </div>
            <!-- E 推荐专家 -->
          </div>
        </div>
      </div>
    </div>

    <!--追加悬赏-->

    <footer class="footer hidden-xs">
      <div class="container-fluid" id="footer">
        <p class="address">
          Copyright&nbsp;©&nbsp;2017-2020 All Rights Reserved 优优班--学霸训练营
          Copyrights
          <a href="https://beian.miit.gov.cn" target="_blank">粤ICP备20053482号-2</a>
        </p>
      </div>
    </footer>

    <div class="main_nav_bottom hidden-md hidden-sm hidden-lg">
      <nav class="navbar navbar-default navbar-fixed-bottom">
        <div class="container" align="center">
          <ul class="nav nav-tabs nav-tabs-justified">
            <div class="row" align="center">
              <div class="col-md-3 col-sm-2 col-xs-2" style="padding: 0" align="center">
                <li>
                  <a href="https://www.uuban.com"
                    ><img src="../assets/images/i_home.png" />首页</a
                  >
                </li>
              </div>
              <div class="col-md-3 col-sm-2 col-xs-2" align="center">
                <li>
                  <a href="https://www.uuban.com/index.php/index/index/chques.html"
                    ><img src="../assets/images/i_zujuan.png" />组卷</a
                  >
                </li>
              </div>
              <div class="col-md-3 col-sm-3 col-xs-3" align="center">
                <li>
                  <a href="https://www.uuban.com/index.php/index/index/zujuan.html"
                    ><img src="../assets/images/i_cart.png" />试题篮</a
                  >
                </li>
              </div>
              <div class="col-md-3 col-sm-2 col-xs-2" align="center">
                <li>
                  <a href="https://www.uuban.com/paperfile.html"
                    ><img src="../assets/images/i_paperfile.png" />试卷</a
                  >
                </li>
              </div>
              <div class="col-md-3 col-sm-2 col-xs-2" align="center">
                <li>
                  <a href="/u/20278"><img src="../assets/images/i_my.png" />我的</a>
                </li>
              </div>
            </div>
          </ul>
        </div>
      </nav>
    </div>

    <div class="floatbar" style="margin-top: -220px; display: none">
      <div class="floatbar-item floatbtn-item-top" style="display: none">
        <a href="javascript:" class="floatbar-btn backtotop">
          <i class="fa fa-chevron-up"></i>
          <p>
            回到<br />
            顶部
          </p>
        </a>
      </div>
    </div>
    <div
      class="autocomplete-suggestions autocomplete-search"
      style="z-index: 1031; top: 30px; left: 0px; width: 100px"
    ></div>
  </div>
</template>

// 引入组件
<script setup>
// import QuillEditor from "../components/Editor/index.vue";
import { onMounted, ref, reactive,watch } from "vue";
import { useRoute } from "vue-router";
const route = useRoute();
var list = ref({});
onMounted(() => {
  // list = route.query
list=JSON.parse(localStorage.getItem("key"))
console.log(list);
}),
watch(
	list,
(newName, oldName) => {
  	console.log(newName);
});
</script>
<style scoped>
.nav-tabs {
  text-align: center;
  height: 30px;
  line-height: 30px;
}

.nav-tabs img {
  width: 20px;
  margin: 10px 0 0 0;
  display: block;
}
.question-richtext {
  max-height: 480px;
  position: relative;
  overflow: hidden;
}

.question-richtext .read-more {
  display: block;
  position: absolute;
  top: 386px;
  left: 0;
  width: 100%;
  text-align: center;
  margin: 0;
  padding: 55px 0 15px 0;
  /*background-image: linear-gradient(to bottom, rgba(100, 100, 100, 0) 0%, #ffffff 75%);*/
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 1) 75%
  );
}

.question-title .expired,
.question-title .countdown {
  font-size: 14px;
  color: #fb5746;
}

.article-header {
  background: #fff;
  padding: 20px;
}

@media (max-width: 480px) {
  .article-header {
    padding: 15px 0;
  }
}
</style>
